<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>系统前台首页</title>
    <link rel="stylesheet" href="/user/css/index.css">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.js"></script>
    <style>
        .goodsDiv{
            width:170px;
            height: 240px;
            float: left;
            margin-right: 30px;
        }
        .page{
            margin-top: 500px;
            height: 40px;
        }
        .pageDiv{
            width: 40px;
            border: black solid 1px;
            border-radius: 50%;
            float: left;
            text-align: center;
            line-height: 40px;
            margin-right: 30px;
        }
        .forward,.back{
            display: inline-block;
            width: 80px;
            border: black solid 1px;
            text-align: center;
            line-height: 40px;
            margin-right: 30px;
        }
        .forward{
            float: left;
        }
        .content:after .pageDiv{
            content:'';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<%--导航栏--%>
    <%--    导航--%>
    <div class="header-nav">
        <div class="header-nav-middle">
            <a href="javascript:void(0)" class="header-nav-item">LoveLife!</a>
            <a href="javascript:void(0)" class="header-nav-item">实物周边</a>
            <a href="javascript:void(0)" class="header-nav-item">活动中心</a>
            <a href="/user/PersonalCenter.jsp" class="header-nav-item">个人中心</a>
            <a href="/user/category.jsp" class="header-nav-item" style="margin-left: 425px">我的购物车</a>
            <c:if test="${loginUser!=null}">
                <a href="/commons/login.jsp" class="header-nav-item">
                    <c:out value="${loginUser.account},你好！">
                    </c:out>
                </a>
            </c:if>
            <c:if test="${loginUser==null}">
                <a href="/commons/login.jsp" class="header-nav-item">登录</a>
            </c:if>
                <a href="/commons/register.jsp" class="header-nav-item">立即注册</a>
        </div>
    </div>
    <div class="header-nav-bottom"></div>
    <!--            头部黑框-->
    <div class="header-contain-middle-bottom title-category" id="nav" style="margin-bottom: 60px;">
        <div class="list">
            <ul class="channel_nav_list">
                <li class="" style="background-color: #ed145b"><a target="_blank" href="#" class="home">首页</a></li>
            </ul>
        </div>
    </div>
    <!--    中间内容-->
    <header  class="nav-middle container-fluid">
        <div id="content" class="content middle-content">
            <div class="content-title">
                <div class="content-title-logo"></div>
            </div>
            <div class="middle-content-content">
                <div class="today_deal_tit">
                    <h2 class="floor_head" id="today_deals"></h2>
                    <p class="today_deals_tip">每日十点上新</p>
                </div>
                <div class="today_deal_content">
                    <div style="height: 500px;width: 100%;" class="ul-div">
                        <ul class="il1">
<%--                              <li>--%>
<%--                                    <a href="#" class="ImageStd_1000">--%>
<%--                                   <img src="http://p1.global.jmstatic.com/product/005/033/5033756_std/5033756_dx_1000_400.jpg" alt="" class="img-context">--%>
<%--                                   </a>-->--%>
<%--                                   <p class="title">【3盒装】蒂佳婷药丸面膜（蓝色补水镇静+绿色晒后修护+黑色清洁）</p>--%>
<%--                                   <p class="price">￥ 99 </p>--%>
<%--                               </li>--%>
                        </ul>
                    </div>
                    <%--底部分页区--%>
                    <div style="width: 100%;">
                    <div id="page" class="page" style="margin-top: 0;float: right"></div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <script>
        $(function () {
                $.getJSON("/goods.do",{method:"findGoodsAll"},function(pageInfo){
                    //每次点击时清除之前的内容
                    $(".il1").html("");
                    $("#page").html("");
                    console.log(pageInfo);
                    //遍历输出商品集合
                    for(let j = 0;j<pageInfo.list.length;j++){
                        let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo.list[j].image+"'/></a>");
                        let $name = $("<p class='title1'></p>").html(pageInfo.list[j].name);
                        let $price = $("<p class='price1'></p>").html(pageInfo.list[j].salesprice);
                        let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo.list[j].id+"'></a>");
                        //点击获取商品详情页
                        $goods.click(function () {
                            let gid = $(this).attr("gid");
                            sessionStorage.setItem("gid",gid);
                            location.href="/user/goodsInfo.jsp";
                        })
                        $goods.append($image).append($name).append($price);
                        //添加一个div 为goodsDiv 用于清除浮动
                        let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo.pageNum+"></li>");
                        $goodDiv.append($goods);
                        //把商品信息添加到内容区中
                        $(".il1").append($goodDiv);
                    }
                    //前一页
                    let $forward = $("<div class='forward'>前一页</div>");
                    //后一页
                    let $back = $("<div class='back'>后一页</div>");
                    //添加前一页
                    $("#page").append($forward);
                    //遍历生成分页页码按钮
                    for(let k=0;k<pageInfo.pages;k++){
                        //当前页数=pageInfo.pages
                        let $pageDiv = $("<div class='pageDiv'></div>").html(k+1);
                        $pageDiv.click(function () {
                            //清空当前页面的内容
                            $(".il1").html("");
                            //获取当前的分页页码信息
                            let pageNum=$(this).html();
                            $.getJSON("/goods.do",{method:"findGoodsByPageNum",pageNum:pageNum,cid:pageInfo.list[0].categoryid},function (pageInfo2) {
                                console.log(pageInfo2);
                                //遍历输出商品集合
                                for(let j = 0;j<pageInfo2.list.length;j++){
                                    //遍历生成分页结果
                                    let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo2.list[j].image+"'/></a>");
                                    let $name = $("<p class='title1'></p>").html(pageInfo2.list[j].name);
                                    let $price = $("<p class='price1'></p>").html(pageInfo2.list[j].salesprice);
                                    let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo2.list[j].id+"'></a>");
                                    //点击获取商品详情页
                                    $goods.click(function () {
                                        let gid = $(this).attr("gid");
                                        sessionStorage.setItem("gid",gid);
                                        location.href="/user/goodsInfo.jsp";
                                    })
                                    $goods.append($image).append($name).append($price);
                                    //添加一个div 为goodsDiv 用于清除浮动
                                    let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo2.pageNum+"></li>");
                                    $goodDiv.append($goods);
                                    //把商品信息添加到内容区中
                                    $(".il1").append($goodDiv);
                                }
                            })
                        })
                        $("#page").append($pageDiv);
                    }
                    //添加后一页
                    $("#page").append($back);

                    //前一页功能
                    $forward.click(function () {
                        //获取当前的页码
                        let pageNum =$(".goodsDiv").attr("pageNum")-1;
                        if(pageNum<0){
                            pageNum =1;
                        }
                        //清空当前页面的内容
                        $(".il1").html("");
                        $.getJSON("/goods.do",{method:"findGoodsByPageNum",pageNum:pageNum,cid:pageInfo.list[0].categoryid},function (pageInfo2) {
                            //遍历输出商品集合
                            for(let j = 0;j<pageInfo2.list.length;j++){
                                //遍历生成分页结果
                                let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo2.list[j].image+"'/></a>");
                                let $name = $("<p class='title1'></p>").html(pageInfo2.list[j].name);
                                let $price = $("<p class='price1'></p>").html(pageInfo2.list[j].salesprice);
                                let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo2.list[j].id+"'></a>");
                                //点击获取商品详情页
                                $goods.click(function () {
                                    let gid = $(this).attr("gid");
                                    sessionStorage.setItem("gid",gid);
                                    location.href="/user/goodsInfo.jsp";
                                })
                                $goods.append($image).append($name).append($price);
                                //添加一个div 为goodsDiv 用于清除浮动
                                let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo2.pageNum+"></li>");
                                $goodDiv.append($goods);
                                //把商品信息添加到内容区中
                                $(".il1").append($goodDiv);
                            }
                        })
                    });
                    //后一页功能
                    $back.click(function () {
                        //获取当前的页码
                        let pageNum =Number($(".goodsDiv").attr("pageNum"))+1;
                        if(pageNum>pageInfo.pages){
                            pageNum =pageInfo.pages;
                        }
                        //清空当前页面的内容
                        $(".il1").html("");
                        $.getJSON("/goods.do",{method:"findGoodsByPageNum",pageNum:pageNum,cid:pageInfo.list[0].categoryid},function (pageInfo2) {
                            //遍历输出商品集合
                            for(let j = 0;j<pageInfo2.list.length;j++){
                                //遍历生成分页结果
                                let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo2.list[j].image+"'/></a>");
                                let $name = $("<p class='title1'></p>").html(pageInfo2.list[j].name);
                                let $price = $("<p class='price1'></p>").html(pageInfo2.list[j].salesprice);
                                let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo2.list[j].id+"'></a>");
                                //点击获取商品详情页
                                $goods.click(function () {
                                    let gid = $(this).attr("gid");
                                    sessionStorage.setItem("gid",gid);
                                    location.href="/user/goodsInfo.jsp";
                                })
                                $goods.append($image).append($name).append($price);
                                //添加一个div 为goodsDiv 用于清除浮动
                                let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo2.pageNum+"></li>");
                                $goodDiv.append($goods);
                                //把商品信息添加到内容区中
                                $(".il1").append($goodDiv);
                            }
                        })
                    });
                })
                //商品大类
            $.getJSON("/category.do",{method:"findAll"},function (categorys) {
                //categorys 返回的商品大类信息
                for(let i =0;i<categorys.length;i++){
                    let cid = categorys[i].id;
                    let $one=$("<li class=\"\" style=\"background-color: #ed145b\"><a target=\"_blank\" href=\"#\" class=\"home\">首页</a></li>")
                    // let $div = $("<div cid="+cid+"></div>").html(categorys[i].name);
                    let $div = $("<li cid="+cid+"><a href='javascript:void(0)'>"+categorys[i].name+"</a></li>");
                    //添加到标题栏中
                    // $(".channel_nav_list").html($one);
                    $(".channel_nav_list").append($div);
                    //触发点击事件
                    $div.click(function () {
                        //每次点击时清除之前的内容
                        $(".il1").html("");
                        $("#page").html("");
                        //获取点击事件的cid（大类id）
                        let cid =$(this).attr("cid");
                        //查询对应大类下的商品信息
                        $.getJSON("/goods.do",{method:"findGoodsByCid",cid:cid},function(pageInfo){
                            console.log(pageInfo);
                            //遍历输出商品集合
                            for(let j = 0;j<pageInfo.list.length;j++){
                                let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo.list[j].image+"'/></a>");
                                let $name = $("<p class='title1'></p>").html(pageInfo.list[j].name);
                                let $price = $("<p class='price1'></p>").html(pageInfo.list[j].salesprice);
                                let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo.list[j].id+"'></a>");
                                //点击获取商品详情页
                                $goods.click(function () {
                                    let gid = $(this).attr("gid");
                                    sessionStorage.setItem("gid",gid);
                                    location.href="/user/goodsInfo.jsp";
                                })
                                $goods.append($image).append($name).append($price);
                                //添加一个div 为goodsDiv 用于清除浮动
                                let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo.pageNum+"></li>");
                                $goodDiv.append($goods);
                                //把商品信息添加到内容区中
                                $(".il1").append($goodDiv);
                            }
                            //前一页
                            let $forward = $("<div class='forward'>前一页</div>");
                            //后一页
                            let $back = $("<div class='back'>后一页</div>");
                            //添加前一页
                            $("#page").append($forward);
                            //遍历生成分页页码按钮
                            for(let k=0;k<pageInfo.pages;k++){
                                //当前页数=pageInfo.pages
                                let $pageDiv = $("<div class='pageDiv'></div>").html(k+1);
                                $pageDiv.click(function () {
                                    //清空当前页面的内容
                                    $(".il1").html("");
                                    //获取当前的分页页码信息
                                    let pageNum=$(this).html();
                                    $.getJSON("/goods.do",{method:"findGoodsByCid",pageNum:pageNum,cid:pageInfo.list[0].categoryid},function (pageInfo2) {
                                        console.log(pageInfo2);
                                        //遍历输出商品集合
                                        for(let j = 0;j<pageInfo2.list.length;j++){
                                            //遍历生成分页结果
                                            let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo2.list[j].image+"'/></a>");
                                            let $name = $("<p class='title1'></p>").html(pageInfo2.list[j].name);
                                            let $price = $("<p class='price1'></p>").html(pageInfo2.list[j].salesprice);
                                            let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo2.list[j].id+"'></a>");
                                            //点击获取商品详情页
                                            $goods.click(function () {
                                                let gid = $(this).attr("gid");
                                                sessionStorage.setItem("gid",gid);
                                                location.href="/user/goodsInfo.jsp";
                                            })
                                            $goods.append($image).append($name).append($price);
                                            //添加一个div 为goodsDiv 用于清除浮动
                                            let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo2.pageNum+"></li>");
                                            $goodDiv.append($goods);
                                            //把商品信息添加到内容区中
                                            $(".il1").append($goodDiv);
                                        }
                                    })
                                })
                                $("#page").append($pageDiv);
                            }
                            //添加后一页
                            $("#page").append($back);

                            //前一页功能
                            $forward.click(function () {
                                //获取当前的页码
                                let pageNum =$(".goodsDiv").attr("pageNum")-1;
                                if(pageNum<0){
                                    pageNum =1;
                                }
                                //清空当前页面的内容
                                $(".il1").html("");
                                $.getJSON("/goods.do",{method:"findGoodsByCid",pageNum:pageNum,cid:pageInfo.list[0].categoryid},function (pageInfo2) {
                                    //遍历输出商品集合
                                    for(let j = 0;j<pageInfo2.list.length;j++){
                                        //遍历生成分页结果
                                        let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo2.list[j].image+"'/></a>");
                                        let $name = $("<p class='title1'></p>").html(pageInfo2.list[j].name);
                                        let $price = $("<p class='price1'></p>").html(pageInfo2.list[j].salesprice);
                                        let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo2.list[j].id+"'></a>");
                                        //点击获取商品详情页
                                        $goods.click(function () {
                                            let gid = $(this).attr("gid");
                                            sessionStorage.setItem("gid",gid);
                                            location.href="/user/goodsInfo.jsp";
                                        })
                                        $goods.append($image).append($name).append($price);
                                        //添加一个div 为goodsDiv 用于清除浮动
                                        let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo2.pageNum+"></li>");
                                        $goodDiv.append($goods);
                                        //把商品信息添加到内容区中
                                        $(".il1").append($goodDiv);
                                    }
                                })
                            });
                            //后一页功能
                            $back.click(function () {
                                //获取当前的页码
                                let pageNum =Number($(".goodsDiv").attr("pageNum"))+1;
                                if(pageNum>pageInfo.pages){
                                    pageNum =pageInfo.pages;
                                }
                                //清空当前页面的内容
                                $(".il1").html("");
                                $.getJSON("/goods.do",{method:"findGoodsByCid",pageNum:pageNum,cid:pageInfo.list[0].categoryid},function (pageInfo2) {
                                    //遍历输出商品集合
                                    for(let j = 0;j<pageInfo2.list.length;j++){
                                        //遍历生成分页结果
                                        let $image = $("<a href='javascript:void(0)' class='ImageStd_1000'><img style='width: 100%' src='/user/images"+pageInfo2.list[j].image+"'/></a>");
                                        let $name = $("<p class='title1'></p>").html(pageInfo2.list[j].name);
                                        let $price = $("<p class='price1'></p>").html(pageInfo2.list[j].salesprice);
                                        let $goods = $("<a href='javascript:void(0)' gid='"+pageInfo2.list[j].id+"'></a>");
                                        //点击获取商品详情页
                                        $goods.click(function () {
                                            let gid = $(this).attr("gid");
                                            sessionStorage.setItem("gid",gid);
                                            location.href="/user/goodsInfo.jsp";
                                        })
                                        $goods.append($image).append($name).append($price);
                                        //添加一个div 为goodsDiv 用于清除浮动
                                        let $goodDiv = $("<li class='goodsDiv' pageNum="+pageInfo2.pageNum+"></li>");
                                        $goodDiv.append($goods);
                                        //把商品信息添加到内容区中
                                        $(".il1").append($goodDiv);
                                    }
                                })
                            });
                        })
                    })
                }
            })
        })
    </script>
</body>
</html>
